<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <!-- 引入ElementUI的样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        /*
            设置body样式

        */
        body{
            margin: 0px;/*设置上下左右空白距离为0*/
        }
        /*
            设置index-container  div样式
        */
        .register-container{
            margin: 0 auto;/*设置div居中*/
            width: 85%;/*设置宽度,使用百分比设置*/
            min-width: 1024px;/*设置最小宽度*/
            background-image: url("images/back.jpg");
        }



        /*
               ElementUI提供的样式
               设置el-header，el-footer两个标签的样式

           */
        .el-header, .el-footer {
            background-color: #606266;
            color: #333;
            line-height: 60px;
        }

        .el-header{
            background-color: lightblue;
            display: flex;
        }

        .el-footer{
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            font-family: 宋体;
            letter-spacing: 3px;
            color: white;

        }

        .el-header .logo{
            border: 0px solid red;
            width: 50%;
            height: 100%;
            padding-left: 50px;
        }

        .logo span{
            margin-top:-30px;
            position: relative;
            top:-17px;
            display: inline-block;
            border: 0px solid red;
            height: 100%;
            line-height: 60px;
            font-size: 30px;
            font-weight: bold;
        }

        .el-header .user_info{
            border: 0px solid blue;
            width: 50%;
            height: 100%;
            text-align: right;
            padding-right: 30px;
        }
        /**
          ElementUI提供的样式
          设置el-main样式
         */
        .el-main {
            /*background-color: #E9EEF3;*/
            color: #333;
        }

        .win-register{
            width: 35%;
            margin:0 auto;

        }

        a:link{
            text-decoration: none;
            color: dodgerblue;
            font-weight: bold;
        }
        a:visited{
            text-decoration: none;
            color: dodgerblue;
            font-weight: bold;
        }
        a:hover{
            color: red;
            font-weight: bold;
        }

    </style>

</head>
<body>
<div id="register-container" class="register-container">

    <el-container>
        <el-header>
            <div class="logo">
                <img src="images/logo.png" style="height:60px ">
                <span>童趣玩具店</span>
            </div>
            <div class="user_info" >
                <!--
                    v-if:vue的if指令
                    当v-if为true时显示当前标签，为false不显示当前标签
                -->
                <div class="user_operate" v-if="curUser==null">
                    <a href="register.html">用户注册</a>
                    <a href="login.html">用户登录</a>
                </div>

                <div class="user_info_div" v-if="curUser!=null">
                        <span style="margin-right:10px">
                            <label style="color: red">欢迎您:</label>
                            <label style="color: blue">{{curUser.user_name}}</label>
                        </span>

                    <el-button type="danger" plain size="mini" @click="exit">退出</el-button>
                </div>

            </div>
        </el-header>
        <!--商品信息展示区-->
        <el-main>
            <div class="win-register">
                <h2 align="center">用户注册</h2>

                <el-form :model="user" label-width="80px">

                    <el-form-item label="用户名">
                        <el-input v-model="user.user_name"></el-input>
                    </el-form-item>

                    <el-form-item label="密码">
                        <el-input show-password v-model="user.user_password"></el-input>
                    </el-form-item>

                    <el-form-item label="性别">
                        <el-radio-group v-model="user.user_sex">
                            <el-radio label="1">男</el-radio>
                            <el-radio label="0">女</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="E-mail">
                        <el-input v-model="user.user_email"></el-input>
                    </el-form-item>

                    <el-form-item label="出生日期">
                        <el-date-picker type="date" placeholder="选择日期" v-model="user.user_birthday" style="width: 100%;"></el-date-picker>
                    </el-form-item>


                    <el-form-item label="爱好">


                        <el-checkbox-group v-model="user.user_hobbys">
                            <el-checkbox label="听音乐" >听音乐</el-checkbox>
                            <el-checkbox label="睡觉" >睡觉</el-checkbox>
                            <el-checkbox label="逛街" >逛街</el-checkbox>
                            <el-checkbox label="网游" >网游</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>


                    <el-form-item label="地址">
                        <el-input v-model="user.user_address"></el-input>
                    </el-form-item>

                </el-form>
                <el-button type="primary" style="width: 100%" @click="register">注册</el-button>
            </div>

        </el-main>
        <el-footer>童趣玩具店所有</el-footer>
    </el-container>

</div>

<script src="js/vue.min.js"></script>
<script src="js/axios.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="js/sweetalert2.js"></script>
<script>
    /**
     * 创建Vue对象，并对vue进行配置
     * 在vue的构造器中配置
     */
    new Vue({
        //用于配置vue要渲染的元素,在el指定的元素中vue可以起作用,脱离指定元素，vue无效,vue的渲染元素可以为任意元素，一般是div
        el:'#register-container',
        data(){//vue的数据区，等同于java类中的属性
            return{
                curUser:null,//当前登录者对象
                user:{
                    user_hobbys:[],
                },//user对象
            }
        },
        methods:{//vue的方法区,在方法区中定义方法，这些方法类似与java中的方法
            /**
             * 获得当前登录者信息
             */
            getCurUser(){
                //从sessionStorage中获得curUser的值，值为一个字符串
                let curUserStr = window.sessionStorage.getItem("curUser");
                if(curUserStr){
                    //将JSON格式的字符串解析为一个JSON对象
                    this.curUser = JSON.parse(curUserStr);
                    // console.log(this.curUser.user_name);
                }

            },
            /**
             * 退出登录
             */
            exit(){
                //使用ajax向服务端发送退出请求
                axios.delete('user/exit')
                    .then(response=>{
                        let result = response.data;
                        if(result.success){
                            //将浏览器的sessionStorage中存储的用户登录信息移除
                            window.sessionStorage.removeItem("curUser");//根据key移除对应的属性
                            //使用ElementUI的弹框组件实现
                            this.$message({
                                message: result.message,
                                type: 'success',
                                duration:500,//设置延迟关闭时间(毫秒)
                                onClose:()=>{//当弹框关闭后要执行的函数
                                    this.curUser = null;//重置curUser对象为null
                                }
                            });
                        }
                    })
                    .catch(err=>{
                        alert(err);
                    });
            },
            /**
             * 用户注册
             */
            register(){
                axios.post('user/register',this.user)
                    .then(response=>{
                        let result = response.data;
                        if(result.success){
                            //重置user对象
                            user={};
                            //使用sweetalert2弹框组件，弹框
                            Swal.fire({
                                icon: 'success',//图标
                                title: result.message,//消息
                                showConfirmButton: false,//不显示确认按钮
                                timer: 1000,//延迟时间
                                willClose:()=>{//当弹框关闭时执行的函数
                                    location.href="/toyshopping";//跳转到首页
                                }
                            });

                        }
                    })
                    .catch(err=>{
                        alert(err);
                    });
            }
        },
        created(){/*在页面加载后自动执行*/

        },
        mounted(){/*DOM结构在内存中构建前执行*/
            this.getCurUser();//获得当前登录者信息
        }
    });
</script>
</body>
</html>